<template>
  <div class="content " ref="content" :class="weather.cap.indexOf('晴') < 0 ? 'cloudy' : ''">
    <div style="flex: 1;text-align: left;width: 0">
      <div style="display: flex;align-items: center">
        <div style="font-size: 34px;font-weight: bold;line-height: 100%;">{{ weather.temp }}</div>
        <div style="text-align: left;margin-left: 6px;font-size: 12px">
          <div style="box-sizing: border-box">
            {{ daily.tempHi < 28 ? '最低温' + daily.tempLo + '°C' : '最高温' + daily.tempHi + '°C' }} </div>
              <div style="font-weight: bold;">°C {{ weather.cap }}</div>
          </div>
        </div>
      </div>
      <div>
        <Vue3Lottie v-if="weather.cap.indexOf('雨') >= 0 && rainAnimation && height" :animationData="rainAnimation"
          :width="height" :height="height" autoplay />
        <Vue3Lottie v-else-if="weather.cap.indexOf('晴') >= 0 && sunnyAnimation && height"
          :animationData="sunnyAnimation" :width="height" :height="height" autoplay />
        <Vue3Lottie v-else :animationData="cloudyAnimation" :width="height" :height="height" autoplay />
      </div>


      <!-- 下雨提醒 -->
      <a-dialog v-model="rainDialog.visible">
        <div class="dialog-title">天气提醒</div>
        <div>
          现在黄埔区{{ weather.cap }}，记得带伞哦！
        </div>
        <div style="text-align:right;margin-top: 20px;">
          <button class="button btn-error" @click.stop="confirm()">知道了</button>
        </div>
      </a-dialog>
    </div>
</template>

<script>
export default {
  name: "a-weather",
}
</script>
<script setup>
import ADialog from "@/components/a-dialog.vue";
import { ref, onMounted, defineEmits } from 'vue';
import { Vue3Lottie } from 'vue3-lottie'
import CloudyAnimationData from './lottie/cloudy.json'; // 
import RainAnimationData from './lottie/rain.json'; // 
import SunnyAnimationData from './lottie/sunny.json'; // 
import msn_server_api from '@/api/msn_server_api';
import { storage } from "@/lib/storage";
const emit = defineEmits(['weatherChange']);

// 定义响应式变量来存储Lottie动画数据
const cloudyAnimation = ref(CloudyAnimationData);
const rainAnimation = ref(RainAnimationData);
const sunnyAnimation = ref(SunnyAnimationData);
const height = ref(0);
const beforeClickTime = ref(0);

const rainDialog = ref({
  visible: false
});
const content = ref(null);
const daily = ref({
  summary: '',
  tempHi: 0,
  tempLo: 0,
});
const weather = ref({
  "cap": "阴",
  "icon": 5,
  "temp": 0.0,
  "tempDesc": 8,
});


const confirm = () => {
  storage.set('beforeClickRainTime', Date.now());
  rainDialog.value.visible = false;
}

function timeLimit() {
  const now = new Date(); // 获取当前时间
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // 创建今天的日期
  let targetTime = new Date(today.getTime());
  targetTime.setHours(19, 50, 0, 0);
  if (now > targetTime) {
    return true;
  }

  targetTime = new Date(today.getTime());
  targetTime.setHours(17, 50, 0, 0);
  if (now > targetTime) {
    return true;
  }
}

onMounted(() => {
  storage.get('beforeClickRainTime').then(r => {
    beforeClickTime.value = r ? parseInt(r) : 0
  })

  if (content.value) {
    height.value = content.value.clientHeight;
  }
  let latitude = 23.165826
  let longitude = 113.426904
  getWeather(latitude, longitude);
  try {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        latitude = position.coords.latitude; // 获取纬度
        getWeather(latitude, longitude);
      }, function (error) {
        console.log("获取位置失败：" + error.message);
      });
    } else {
      console.log("浏览器不支持Geolocation API");
    }
  } catch (error) {
    console.log(error);
  }
});

function isTimeGreaterThan16() {
  const now = new Date(); // 获取当前时间
  const today = new Date(now.getFullYear(), now.getMonth(), now.getDate()); // 创建一个时间，包含年月日，时间设为00:00:00
  const sixteenOClock = new Date(today.getTime()); // 复制今天的时间，准备用来设置为16:00:00
  sixteenOClock.setHours(16, 0, 0, 0); // 设置时间为16点

  // 比较当前时间与16点
  return now > sixteenOClock;
}


function getWeather(latitude, longitude) {
  msn_server_api.weatheroOverview(latitude, longitude, (res) => {
    try {
      weather.value = res.responses[0].weather[0].current;
      daily.value.tempHi = res.responses[0].weather[0].forecast.days[0].daily.tempHi;
      daily.value.tempLo = res.responses[0].weather[0].forecast.days[0].daily.tempLo;
      if (isTimeGreaterThan16()) {
        daily.value.summary = res.responses[0].weather[0].forecast.days[0].daily.night.summary;
      } else {
        daily.value.summary = res.responses[0].weather[0].forecast.days[0].daily.day.summary;
      }
      emit('weatherChange', weather.value);

      let rain = weather.value.cap.indexOf('雨') >= 0;
      if (timeLimit() && Date.now() - beforeClickTime.value > 1000 * 60 * 60 * 1 && rain) {
        rainDialog.value.visible = true;
      }

    } catch (error) {
      console.log(error);
    }
  });
}
</script>

<style scoped lang="less">
.content {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 10px;
  height: 100%;
  box-sizing: border-box;
}

.cloudy {
  background: linear-gradient(10deg,
      transparent 0%,
      var(--light-background-color) 90%);
}
</style>